<template>
  <section>
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <div class="verificetion">
      <div class="Verification_logo_box dip ju_al">
        <img src="../../../static/images/Other/logo.png" alt="" class="verificetion_img">
      </div>
      <div class="input_verificetion dip ju_al" :class="{'inputActive':this.InputHandset}">
        <!-- <input type="text" class="input_usernumber" v-model="usernumber" placeholder="请输入您的手机号" @focus="adduserNumber()"> -->
        <input type="text" class="input_usernumber" v-model="usernumber" placeholder="请输入您的手机号">
      </div>
      <div class="input_verificetion dip ju_al" :class="{'inputActive':this.InputHandsetS}" >
        <input type="txet" class="input_verificetionnumber" v-model="verificetionnumber" placeholder="请输入验证码" @focus="getverificetionnumber()">
        <button class="verifiction_btn" id="input_verificetion" @click="BtnVerifiCetion()" :disabled="this.verifnumber" :class="{'vernumber':this.verifnumber}">{{this.vernumberText}}</button>
      </div>
    </div>
    <p class="verif_xian"></p>   
    <div class="verificetion">
      <button class="btnverifPR btn_postS" @click="getSubmit()" :class="{'btn_POSt':this.btnpostS}" :disabled="this.btnpostS">授权</button>
      <button class="btnverifPR btn_return" @click="setretunt()">跳过</button>
    </div> 
  </section>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
import bus from '@/assets/bus/js/bus.js'
export default {
  data(){
    return{
      urls:{
        url:'',
        text:'手机号验证',
      },
      usernumber:'',
      verificetionnumber:'',
      InputHandset:'',//显示错误状态
      InputHandsetS:'',
      verifnumber:false,//这是判断发送验证码
      vernumberText:"获取验证码",
      btnpostS:true, //这是住址授权
      OPANID:'',//openid 
      fff:'',
      unionid:'',
    }
  }
  ,methods:{
    adduserNumber(){ //(注释)亲空手机号
      if(this.usernumber == '' || !bus.number().test(this.usernumber)){
        this.usernumber = ''
        this.InputHandset = false;
      }
    },
    getverificetionnumber(){
      if(this.verificetionnumber == '' || !bus.amount().test(this.verificetionnumber)){
        this.verificetionnumber = ''
        this.InputHandsetS = false;     
      }
    },
    setretunt(){
      this.$router.back()
    },
    veraxiosifieceton(typt,pass){
      // this.OPANID = sessionStorage.getItem('openId') 
      this.unionid = sessionStorage.getItem('unionid') 
      var passd = pass == "" ? 222 : pass
      var date = new FormData();
        date.append("name",this.usernumber);
        date.append("password",passd);
        date.append("loginType",typt);
        // date.append("oppenid",this.OPANID);
        date.append("unionid",this.unionid);
      this.axios.post(this.$busPoat.bindPhone(),date).then(res => {
        if (res.data.iplancode == 201){
          alert('手机验证码发送成功')
          console.log(res)
        }else if(res.data.iplancode == 102){
          alert('手机验证码发送失败')
        }else if(res.data.iplancode == 104){
          alert('验证码不正确或验证码已失效')
        }else if (res.data.iplancode == 200){
          sessionStorage.setItem('token',res.data.token)  
          alert('授权成功')
          this.$router.back()
        }
      }).catch(err =>{
        alert('验证码发送失败')
        console.log(err)
      })
    },
    BtnVerifiCetion(){
      // if(this.usernumber == '' || !bus.number().test(this.usernumber)){
      //   this.InputHandset = true;
      // }else{
        var _this = this;
        var t ,d;
        var i = 120;
        var poand = document.getElementById('input_verificetion')
        _this.vernumberText =''+i+'秒后重新获取' 
         d = setInterval(function(){
          poand.setAttribute("disabled", "disabled");          
        },16)                                             
          t = setInterval(function(){
            i--;   
            // _this.vernumberText =''+i+'秒后重新获取' 
            poand.innerText = ''+i+'秒后重新获取' 
            if(i<=0){
              clearInterval(t)
              clearInterval(d)
              // _this.btnpostS = true
              _this.verifnumber = false
               poand.innerText = '获取验证码'
            }
          },1000)
        _this.verifnumber = true
        this.veraxiosifieceton('mobileVerifi',111)
         _this.btnpostS = false  //这是授权显示                               
      // }
    },
    getSubmit(){
      var _this = this
      if(this.usernumber == '' || !bus.number().test(this.usernumber)){  
        this.InputHandset = true;
      }else if(this.verificetionnumber == ''){
        this.InputHandsetS = true;
      }else{
        this.veraxiosifieceton('mobileLogin',_this.verificetionnumber)        
      }
    }
  }
  ,components:{Nav},
}
</script>
<style lang="scss" scoped>
.Verification_logo_box{
  margin-top:.8rem;
  width: 100%;
  height: 3.6rem;
  background: #fff;
  .verificetion_img{
    height: 44.45%;
    width: 23%;
  }
}
.verificetion{
  width: 100%;
  padding:0rem .2rem;
}
.input_verificetion{
  width: 100%;  
  height: 1rem;
  margin-bottom:.2rem;
  background: #eeeeee;  
  padding:0rem 3%;
  input{
    padding:3% 0% 3% 4%;
    height: 100%;
    font-size: .24rem;
    color:#666;
    background: transparent;
    font-family: 'Arial'
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    font-size: .24rem;
    color:#C1C1C1;
  } 
  input:-moz-placeholder, textarea:-moz-placeholder { 
    font-size: .24rem;
    color:#C1C1C1;
  } 
  input::-moz-placeholder, textarea::-moz-placeholder { 
    font-size: .24rem;
    color:#C1C1C1;
  } 
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    font-size: .24rem;
    color:#C1C1C1;
  } 
  .input_usernumber{
    width: 100%;
  }
  .input_verificetionnumber{
    width: 70%;
  }
  .verifiction_btn{
    width: 30%;
    height: 80%;
    border:.02rem solid #FF7200;
    text-align: center;
    font-size:.24rem;
    color:#FF7200;
    background: transparent;
    // line-height: .8rem;
  }
  .vernumber{
    border:.02rem solid #DEDEDE !important;
    background: #DEDEDE !important;
    color:#C1C1C1;
  }
}
.verif_xian{
  margin:.6rem 0rem;
  width: 100%;
  height: 0.02rem;
  background: #DEDEDE;
}
.btnverifPR{
  width: 100%;
  height: 1rem;
  font-size: .3rem;
}
.btn_postS{
  background: #ff7200;  
  color:#fff;    
}
.btn_POSt{
  background:#ff9946 ;
  color:#ffd0ab;
}
.btn_return{
  border:.02rem solid #FF7200;
  color:#FF7200;
  margin-top:.2rem ;
  background: #fff;
}
.inputActive{
  border:.02rem solid #FF7200;
  color:#FF7200;
  box-shadow: inset 0px 0px 4px #ff7200;
}

</style>
